<div class="ui masthead vertical segment">
  <div class="ui container">
    <div class="introduction">

      <h1 class="ui header">
        Modal

        <div class="sub header">
          A modal displays content that temporarily blocks interactions with the main view of a site
        </div>
      </h1>

      <div class="ui hidden divider"></div>

      <p>
        For additional documentation on how to configure this module, please refer to the {{#link-to 'modules.index'}}Getting Started{{/link-to}} section and Semantic UI's module specific external documentation links below.
      </p>

      <div class="ui four item stackable tabs menu">
        <a class="item" href="http://semantic-ui.com/modules/modal.html" target="_blank">Definition</a>
        <a class="item" href="http://semantic-ui.com/modules/modal.html#/examples" target="_blank">Examples</a>
        <a class="item" href="http://semantic-ui.com/modules/modal.html#/usage" target="_blank">Usage</a>
        <a class="item" href="http://semantic-ui.com/modules/modal.html#/settings" target="_blank">Settings</a>
      </div>

    </div>

  </div>
</div>

<div class="ui main container">

  {{#ui-example
    header="Simple Example"
    subHeader="Modal using an inline component"
    as |showing setCopyCode|}}

    {{#ui-html showing=showing}}
      <div class="ui button" {{action 'openModal' 'profile'}}>
        Open Profile
      </div>

      {{#ui-modal name="profile" class="profile" onApprove=(action 'approveModal') onDeny=(action 'denyModal')}}
        <i class="close icon"></i>
        <div class="header">
          Profile Picture
        </div>
        <div class="image content">
          <div class="ui medium image">
            <img src="http://semantic-ui.com/images/avatar/large/chris.jpg">
          </div>
          <div class="description">
            <div class="ui header">We've auto-chosen a profile image for you.</div>
            <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
            <p>Is it okay to use this photo?</p>
          </div>
        </div>
        <div class="actions">
          <div class="ui black deny button">
            Nope
          </div>
          <div class="ui positive right labeled icon button">
            Yep, that's me
            <i class="checkmark icon"></i>
          </div>
        </div>
      {{/ui-modal}}
    {{/ui-html}}

    {{#ui-annotation showing=showing setCopyCode=setCopyCode}}
<div class="ui button" onclick="\{{action 'openModal' 'profile'}}">
  Open Profile
</div>

\{{#ui-modal name="profile" class="profile" onApprove=(action 'approveModal') onDeny=(action 'denyModal')}}
  <i class="close icon"></i>
  <div class="header">
    Profile Picture
  </div>
  <div class="image content">
    <div class="ui medium image">
      <img src="http://semantic-ui.com/images/avatar/large/chris.jpg">
    </div>
    <div class="description">
      <div class="ui header">We've auto-chosen a profile image for you.</div>
      <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
      <p>Is it okay to use this photo?</p>
    </div>
  </div>
  <div class="actions">
    <div class="ui black deny button">
      Nope
    </div>
    <div class="ui positive right labeled icon button">
      Yep, that's me
      <i class="checkmark icon"></i>
    </div>
  </div>
\{{/ui-modal}}
    {{/ui-annotation}}

  {{/ui-example}}

  {{#ui-annotation showing=true type="javascript"}}
// Modal controller actions
import Ember from 'ember';

export default Ember.Controller.extend({
  actions: {
    openModal: function(name) {
      $('.ui.' + name + '.modal').modal('show');
    },

    approveModal: function(element, component) {
      alert('approve ' + component.get('name'));
      return false;
    },

    denyModal: function(element, component) {
      alert('deny ' + component.get('name'));
      return true;
    }
  }
});
  {{/ui-annotation}}

  <div class="ui divider"></div>

  {{#ui-example
    header="Simple Example"
    subHeader="Modal using an inbox-modal component"
    as |showing setCopyCode|}}

    {{#ui-html showing=showing}}
      <div class="ui button" {{action 'openModal' 'inbox'}}>
        Open Inbox
      </div>

      {{inbox-modal}}
    {{/ui-html}}

    {{#ui-annotation showing=showing setCopyCode=setCopyCode}}
<div class="ui button" onclick="\{{action 'openModal' 'inbox'}}">
  Open Inbox
</div>

\{{inbox-modal}}
    {{/ui-annotation}}

  {{/ui-example}}

  {{#ui-annotation showing=true type="javascript"}}
import UiModal from 'semantic-ui-ember/components/ui-modal';

export default UiModal.extend({
  name: 'inbox',
  classNames: [ 'inbox' ],

  actions: {
    yes: function() {
      alert('yes');
      this.execute('hide');
    },

    no: function() {
      alert('no');
    }
  }
});
  {{/ui-annotation}}

  <br/>

  {{#ui-annotation showing=true type="handlebars"}}
<i class="close icon"></i>
<div class="header">
  Archive Old Messages
</div>
<div class="image content">
  <div class="image">
    <i class="archive icon"></i>
  </div>
  <div class="description">
    <p>Your inbox is getting full, would you like us to enable automatic archiving of old messages?</p>
  </div>
</div>
<div class="actions">
  <div class="ui red basic button" onclick="\{{action 'no'}}">
    <i class="remove icon"></i>
    No
  </div>
  <div class="ui green basic button" onclick="\{{action 'yes'}}">
    <i class="checkmark icon"></i>
    Yes
  </div>
</div>
  {{/ui-annotation}}


</div>

